<template>
  <el-dialog
    :visible.sync="visible"
    width="580px"
    title="选择自己的工作状态"
    :before-close="onClose"
  >
    <div>
      <div class="flex">
        <div
          v-for="item in types"
          :key="item.id"
          class="flex11 flexcolumn aligncenter justifycenter statusitem"
          :class="{ active: item.id == active }"
          @click="handleClick(item)"
        >
          <svg-icon :icon-class="item.icon" class-name="statusicon" />
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="tips p-20 mt-20">
        <div class="mb-20">我在上班：进入客户分配模式；</div>
        <div class="mb-20">
          暂时离开：不再主动给你分配客户，但其他客服可以给你转接；
        </div>
        <div class="mb-20">
          我要下班：不再给你分配客户，其他客服也不能给你转接；
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="donClose">保存</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      types: [
        { id: 1, title: "上班", icon: "sonline" },
        { id: 2, title: "离开", icon: "leave" },
        { id: 3, title: "下班", icon: "offline" },
      ],
      active: 1,
    };
  },
  props: ["visible"],
  methods: {
    onClose() {
      this.$emit("update:visible", false);
      //   this.$emit('handCloseDialog');
    },

    handleClick(item) {
      this.active = item.id;
    },
  },
};
</script>
<style lang="scss" scoped>
.statusitem {
  border: 1px solid #e9e9e9;
  height: 150px;
  margin-right: 20px;
  position: relative;

  &:last-child {
    margin: 0;
  }

  &.active {
    border: 1px solid #3876e8;
    box-shadow: 0 5px 10px 0 rgba(56, 118, 232, 0.15);
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      background: url("~@/assets/images/tag.png");
      background-size: 100% 100%;
    }
  }
}
.statusicon {
  width: 30px;
  height: 30px;
  margin-bottom: 15px;
}
.tips {
  background: rgba(56, 118, 232, 0.03);
  border: 1px solid rgba(56, 118, 232, 0.3);
}
</style>